<template>
	<div>
		<el-dialog title="测试结果-LAB值查看" width="70%" @open="open" class="icon-dialog" :visible.sync="show" :before-close="closeForm" append-to-body>

      <table class="table table-bordered" align="center" width="100%" style="word-break:break-all; margin-bottom:50px;  font-size:13px;">

        <tbody>
				 <tr>
						<td class="title" width="100">{{$t('field.Testresult_fbillno')}}：</td>
						<td>
							{{form.fbillno}}
						</td>
				 </tr>

				 <tr>
						<td class="title" width="100">{{$t('field.Testresult_fdevice')}}：</td>
						<td>
							{{form.fdevice}}
						</td>
				 </tr>

				 <tr>
						<td class="title" width="100">{{$t('field.Testresult_fisvs')}}：</td>
						<td>
							{{form.fisvs}}
						</td>
				 </tr>
				 <tr>
						<td class="title" width="100">{{$t('field.Testresult_fvc')}}：</td>
						<td>
							{{form.fvc}}
						</td>
				 </tr>
				 <tr>
						<td class="title" width="100">{{$t('field.Testresult_fcompletetime')}}：</td>
						<td>
							{{form.fcompletetime}}
						</td>
				 </tr>
				</tbody>

			</table>

      <el-steps :active="active" direction="vertical" align-cente finish-status="success">
        <el-step title="步骤 1" description="接入">
          <template slot="description">
            <div  class="putOnRecordLA" >
              <el-row >
                <el-col :span="5">编号</el-col>
                <el-col :span="5">{{form.fbillno}}</el-col>
                <el-col :span="5">设备</el-col>
                <el-col :span="5">{{form.fdevice}}</el-col>
              </el-row>
              <el-row style="border-top:1px solid #dfe6ec;" >
              <el-col :span="5">VS值</el-col>
              <el-col :span="5">{{form.fisvs}}</el-col>
            </el-row>
            </div>

          </template>
        </el-step>
        <el-step title="步骤 2" description="扫描信息"></el-step>
        <el-step title="步骤 3" description="通电"></el-step>
        <el-step title="步骤 4" description="放入温箱"></el-step>
        <el-step title="步骤 5" description="测试"></el-step>
        <el-step title="步骤 6" description="上传测试结果"></el-step>
      </el-steps>

      <el-button style="margin-top: 12px;" @click="next()">下一步</el-button>
      <div id="childChart" style="width: 100%;height: 300px; " ></div>

    </el-dialog>

   </div>
</template>
<script>
import { detail  } from '@/api/app/testresult'
import echarts from "echarts/lib/echarts";
export default {

	name:'testresultdetail',
	props: {
		show: {
			type: Boolean,
			default: true
		},
		size: {
			type: String,
			default: 'mini'
		},
		info: {
			type: Object,
		},
    mycahrt:{
      type:Object
    }
	},
	data() {
		return {
      active: 0,
      list:[{
        fid:'1',
        fqianru:'1',
        fepaper:'1',
        fwendu :'1',
        fboxing:'1',
        fl1:'1',
        fstate:'1',
        operate:'1',
      }],
			form:{
        fbillno:'',
        ftype:'',
        fdevice:'',
        ftray:'',
        fqianru:'',
        fisvs:'',
        fvc:'',
        fstate:'',
        fcompletetime:'',
        fepaper:'',
        fwendu:'',
        fboxing:'',
			}

		}
	},

	watch:{

		show:{
      handler:function (val){
        this.show = val
      },
      immediate:true,
      deep:true
    }
	},
  mounted() {
    this.drawLine();
  },
  created() {
    setTimeout(() =>{
      this.drawLine()
    },6000)
  },
  methods: {
    next() {
      console.log(this.active)
      if (this.active++ > 5) this.active = 0;
    },
    async drawLine() {
      //console.log("调用折线图1")
      let myChart = echarts.init(document.getElementById('childChart'));
      //console.log("调用折线图2")
      //console.log(myChart)
      // 绘制图表
      myChart.setOption({
        xAxis: {
          data: ['A', 'B', 'C', 'D', 'E']
        },
        yAxis: {
          type: 'value',
          name: '温度',
          position: 'left',
          axisLabel: {
            formatter: '{value} °C'
          }
        },
        series: [
          {
            name: '温度',
            data: [10, 22, 35, 23, 19],
            type: 'line',
            label: {
              show: true,
              position: 'bottom',
              textStyle: {
                fontSize: 20
              }
            }
          }
        ]
      });
    },
		open(){
			detail(this.info).then(res => {
				this.form = res.data
			})
		},
		closeForm(){
			this.$emit('update:show', false)
      this.loading = false
      if (this.$refs['form']!==undefined) {
        this.$refs['form'].resetFields()
      }
		},
	},


}

</script>
<style  lang="scss">
.putOnRecordLA {
  background: #fff;
  border: 1px solid #dfe6ec;
  border-radius: 4px;

  & .el-col {
    padding-left: 16px;
    height: 38px;
    line-height: 38px;
    font-size: 14px;
    color: #333333;
    font-family: '兰亭黑简';
  }
  & .el-col-5 , .el-col-6{
      border-right: 1px solid #dfe6ec;
    }
}
@import '@/assets/scss/common.scss'
</style>
